<!--
 * @Date: 2023-03-21 10:51:07
 * @LastEditTime: 2023-06-10 23:24:38
 * @FilePath: /prepaid-refill/src/views/incomeDetail/incomeDetail.vue
 * 介绍:收益明细
-->
<script lang="ts" setup>
import { formatNumber } from "@@/utils/tools/tools";
import {
  apiPbcpromotionIncomeLogs,
  PromotionIncomeLogs,
} from "@@/api/page/incomeDetail";
import { apiMoneyLogs, MoneyLogs } from "@@apiModule/pagingList";
import dayjs from "dayjs";
/**我的推广收益 */
const pbcpromotionIncomeLogs = ref<PromotionIncomeLogs.Res>();
getPbcpromotionIncomeLogs();
/**获取我的推广收益 */
async function getPbcpromotionIncomeLogs() {
  const res = await apiPbcpromotionIncomeLogs();
  if (!res) return;
  pbcpromotionIncomeLogs.value = res;
}
</script>

<template>
  <div class="incomeDetail auto-mt-lg">
    <Ccard class="auto-mt-xs">
      <Ccard v-for="coin in pbcpromotionIncomeLogs?.coin" class="Ccard-son">
        <div class="flex-A-C flex-J-SB">
          <H3 v-if="coin.coin.code === 'BBC'">NAC</H3>
          <H3 v-else>{{ coin.coin.code }}</H3>
          <div>
            <span>{{ $t("yu-e") }}:</span>
            <span>{{ formatNumber(coin.available, 4) }}</span>
          </div>
          <VanButton
            @click="$router.push({ name: 'withdraw' })"
            color="var(--C-LG1)"
          >
            {{ $t("ti-ru-qian-bao") }}
          </VanButton>
        </div>
      </Ccard>
    </Ccard>
    <Ccard>
      <template #header>
        <h3>{{ $t("cai-wu-ji-lu") }}</h3>
      </template>
      <CpagingList :api="apiMoneyLogs">
        <template #item="{ item }: { item: MoneyLogs.ResItem }">
          <div class="list_item">
            <div class="item_code" v-if="item.coin.code === 'BBC'">NAC</div>
            <div class="item_code" v-else>{{ item.coin.code }}</div>
            <div>
              -{{ formatNumber(item.money) }} {{ $t("yu") }}:
              {{ formatNumber(item.after) }}
            </div>
            <div class="T-S-sm">
              {{ dayjs(item.created_at).format("MM-DD HH:mm:ss") }}
            </div>
            <div class="T-S-sm">{{ item.remark }}</div>
          </div>
        </template>
      </CpagingList>
    </Ccard>
  </div>
</template>

<style lang="less" scoped>
.Ccard-son {
  background-color: var(--C-B2);
}
.list_item {
  padding: var(--gap-md) 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1rem solid var(--C-OT2);
  .item_code {
    font-weight: 600;
  }
}
</style>
